<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #eaf2f5;
  border-right: 15px solid #eaf2f5;
  width: 1250px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #e5f1f5;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #d6e3e8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_eg {
  font-family: Trebuchet MS;
}
table.{{$t|escape:'html'}}_table td {
}
table.{{$t|escape:'html'}}_table td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #d6e3e8;
  font-family: Trebuchet MS;
  width: 150px;
  height: 30px;
}
.{{$t|escape:'html'}}_select {
  width: 195px;
  height: 26px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_text {
  width: 190px;
  height: 20px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_stock_text {
  width: 100px;
  height: 20px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
.{{$t|escape:'html'}}_textarea {
  width: 380px;
  height: 160px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_status_text {
  font-weight: bold;
  padding-bottom: 5px;
  font-family: Arial;
}
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_listde {
  width: 100%;
  border-left: 1px solid #c8cddb;
  border-top: 1px solid #c8cddb;
}
table.{{$t|escape:'html'}}_listde td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #c8cddb;
  border-bottom: 1px solid #c8cddb;
  background-color: #c8cddb;
  color: #ffffff;
  font-weight: bold;
}
table.{{$t|escape:'html'}}_listdrop {
  width: 100%;
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td {
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td.title {
  padding: 5px 10px 5px 20px;
  height: 35px;
  background-color: #dde1eb;
  font-weight: bold;
  text-align: right;
  width: 100px;
  color: 7b7b7b;
  font-size: 11px;
}
table.{{$t|escape:'html'}}_list {
  width: 100%;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 30px;
  background-color: #d6e3e8;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-size: 12px;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.hi td {
  padding-left: 10px;
  height: 35px;
  background-color: #ff8000;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_list tr.roweven:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_option td {
  background-color: #dde1eb;
}
table.{{$t|escape:'html'}}_optionde td.title {
  padding: 0 5px 0 0;
  font-weight: bold;
  text-align: right;
  color: 7b7b7b;
  font-size: 11px;
  height: 25px;
}
table.{{$t|escape:'html'}}_optionde input {
  width: 100px;
}
</style>

<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save_product();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
    <table style="width: 100%;">
      <tr>
        <td style="width: 50%;vertical-align: top;">
          <table class="{{$t|escape:'html'}}_table">
            <tr>
              <td class="title">{{t escape='html'}}Name{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_name" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($product)}}{{$product->name|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. Leather Boot){{/t}}</span></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}普通会员价{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_price" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($product)}}{{$product->price|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. $99.99){{/t}}</span></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}中级会员价{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_level1_price" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($product)}}{{$product->level1_price|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. $99.99){{/t}}</span></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}高级会员价{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_level2_price" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($product)}}{{$product->level2_price|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. $99.99){{/t}}</span></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}VIP会员价{{/t}}</td>
              <td><input id="{{$t|escape:'html'}}_vip_price" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($product)}}{{$product->vip_price|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. $99.99){{/t}}</span></td>
            </tr>
            <tr style="display: none;">
              <td class="title">{{t escape='html'}}Shipping Required{{/t}}</td>
              <td style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_ship" name="{{$t|escape:'html'}}_delivery" type="checkbox" {{if isset($product) && $product->ship_req == 1}}checked="checked"{{else if !isset($product)}}checked="checked"{{/if}}></input>
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Description{{/t}}</td>
              <td><textarea id="{{$t|escape:'html'}}_short" type="text" class="{{$t|escape:'html'}}_textarea">{{if isset($product)}}{{$product->intro_brief|escape:'html'}}{{/if}}</textarea></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Category{{/t}}</td>
              <td><select id="{{$t|escape:'html'}}_category" class="{{$t|escape:'html'}}_select"></select></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Status{{/t}}</td>
              <td class="{{$t|escape:'html'}}_status_text" style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_available" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($product) && $product->status == 1}}checked="checked"{{else if !isset($product)}}checked="checked"{{/if}}></input>{{t escape='html'}}Available{{/t}}
                <input id="{{$t|escape:'html'}}_not_available" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($product) && $product->status == 0}}checked="checked"{{/if}}></input>{{t escape='html'}}Not Available{{/t}}
              </td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Is Credit{{/t}}</td>
              <td class="{{$t|escape:'html'}}_creadit_text" style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_credit_checkbox" name="{{$t|escape:'html'}}_credit_checkbox" type="checkbox" {{if isset($product) && $product->is_credit == 1}}checked="checked"{{else if !isset($product)}}checked=""{{/if}}></input>
              </td>
            </tr>
            <tr>
            <tr>
            <td class="title">{{t escape='html'}}Stock{{/t}}</td>
            <td class="{{$t|escape:'html'}}_stocktext" style="padding-top: 5px;">
              <table cellpadding=0 cellspacing=0>
                <tr>
                  <td width="20px">
                    <input id="{{$t|escape:'html'}}_stock_box" name="{{$t|escape:'html'}}_stock_box" type="checkbox" {{if isset($product) && $product->stock_status == 1}}checked="checked"{{else if !isset($product)}}checked=""{{/if}} onchange="setStock()"></input>
                  </td>
                  <td width="110px">
                    <input id="{{$t|escape:'html'}}_stock_text" class="{{$t|escape:'html'}}_stock_text" type="text" value="{{if isset($product)}}{{$product->stock|escape:'html'}}{{/if}}" disabled="disabled"></input>
                  </td>
                  <td>If less than</td>
                  <td>
                    <input id="{{$t|escape:'html'}}_stock_notice" class="{{$t|escape:'html'}}_stock_text" type="text" value="{{if isset($product)}}{{$product->stock_notice|escape:'html'}}{{/if}}" ></input>
                  </td>
                  <td>then alert</td>
                </tr>
              </table>
            </td>
          </tr>
          </table>
        </td>
        <td style="width: 50%;vertical-align: top;">
          <div class="{{$t|escape:'html'}}_emphasis" style="width: 100%;">
            <table>
              <tr>
                <td style="width: 100px;text-align: right;">{{t escape='html'}}Gallery Photos{{/t}}</td>
                <td>
                  <span id="spanButtonPlaceHolder"></span>
                  <input id="btnCancel" type="button" value="Cancel All Uploads" disabled="disabled" style="display: none;margin-left: 2px; font-size: 8pt; height: 29px;" />
                </td>
              </tr>
            </table>
          </div>
          <div id="{{$t|escape:'html'}}_gallery" style="padding: 5px 0 0 5px;"></div>
        </td>
      </tr>
      <tr>
        <td colSpan="2">
          <table class="{{$t|escape:'html'}}_table" style="margin-top: -6px;">
            <tr>
              <td class="title">{{t escape='html'}}Detailed Description{{/t}}</td>
              <td><textarea id="{{$t|escape:'html'}}_content" name="{{$t|escape:'html'}}_content" rows="15" cols="80" style="width: 500px; height:300px">{{if isset($product)}}{{$product->intro_detail|escape:'html'}}{{/if}}</textarea></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">
      {{t escape='html'}}Product Attributes{{/t}}<span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. Size, Color){{/t}}</span>
    </div>
    <table id="{{$t|escape:'html'}}_attributes" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
      <tr>
        <td style="height: 50px;padding-left: 10px;"><input id="{{$t|escape:'html'}}_attributes_select" type="checkbox"></input></td>
        <td style="padding-left: 10px;" colSpan=5>
          <table>
            <tr>
              <td><select id="{{$t|escape:'html'}}_attributes_actions"><option>{{t escape='html'}}Actions...{{/t}}</option></select></td>
              <td>
                <span class="image_button" style="width: 120px;" onclick="add_attribute();">
                  <table>
                    <tr>
                      <td><img src="image/btn/add.png"></img></td>
                      <td>{{t escape='html'}}New Attribute{{/t}}</td>
                    </tr>
                  </table>
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th style="width: 50px;"></th>
        <th style="width: 200px;">{{t escape='html'}}Name{{/t}}</th>
        <th style="width: 150px;">{{t escape='html'}}Type{{/t}}</th>
        <th style="width: 100px;">{{t escape='html'}}Mandatory{{/t}}</th>
        <th style="width: 400px;">{{t escape='html'}}Description{{/t}}</th>
        <th style="border-right: 0;"></th>
      </tr>
    </table>
    <div>
      <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
        <span class="image_button" style="width: 100px;" onclick="save_product();">
          <table>
            <tr>
              <td><img src="image/btn/save24.png"></img></td>
              <td>{{t escape='html'}}Save{{/t}}</td>
            </tr>
          </table>
        </span>
        <span class="image_button" style="width: 100px;" onclick="history.back();">
          <table>
            <tr>
              <td><img src="image/btn/cancel24.png"></img></td>
              <td>{{t escape='html'}}Cancel{{/t}}</td>
            </tr>
          </table>
        </span>
      </div>
    <div>
  </div>
</div>

<script type="text/javascript" src="libs/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="libs/pozo/common/myutils.js"></script>
<script type="text/javascript" src="libs/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="libs/pozo/mypopimage/jquery.popImage.js"></script>
<script type="text/javascript" src="libs/pozo/mypopimage/mypopimage.js"></script>
<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _id = {{if isset($product)}}'{{$product->id|escape:'javascript'}}'{{else}}0{{/if}};
    var _track = {{if $track_id != NULL}}'{{$track_id|escape:'javascript'}}'{{else}}MiscUtils.unique(){{/if}};
    var _images = JSON.parse('{{$images|@json_encode|escape:'javascript'}}');
    var _attributes = JSON.parse('{{$attributes|@json_encode|escape:'javascript'}}');

    
    var _options = [];
    var _move = null;
    var _edit = null;
    var _y = 0;
    var _pbox = null;
    var _opane = null;
    var _selects = [];
    var _categories = JSON.parse('{{$categories|@json_encode|escape:'javascript'}}');
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      var tr, td, table, elm, div, p;
      elm = document.getElementById('{{$t|escape:'javascript'}}_category');
      setCategories(elm, _categories, 0);

      var elm = document.getElementById('{{$t|escape:'html'}}_content');
      setTinyMCE();
      setStock();

      //Upload Gallery Photos
      var pos = DOMUtils.findPos(document.getElementById('spanButtonPlaceHolder'));
      var up = null;
      var initFunc = function() {
        div = document.createElement('div');
        p = new ModulePopupBox();
        p._open(div, {
          pos : [ pos[0], pos[1] ],
          width : 468,
          t : '',
          doc : document
        });
        up = new ModuleUpload(document, div, 468, 260, null, null, {
          callbackFunc : function() {
            _images = _images.concat(up._files);
            setup_gallery();
          },
          popupBox : p
        });
      };
      var uu = new UploadUtils('');
      uu._uploadUrl = 'ecommerce/upload_product_image.php';
      uu._buttonImageUrl = 'image/upload/browse.png';
      uu._buttonWidth = 94;
      uu._buttonHeight = 29;
      uu._createInstance('', {
        pti : _track,
        t : true
      }, initFunc, function(file, result) {
        up._callbackFunc(file, result);
      });
     
      setup_gallery();
      update_attributes_table();
      
      var select, actions;
      select = document.getElementById('{{$t|escape:'html'}}_attributes_select');
      select.onclick = function() {
        for (var idx in  _selects) {
          var obj = _selects[idx];
          obj.checked = this.checked;
        }
      };
      actions = document.getElementById('{{$t|escape:'html'}}_attributes_actions');
      actions.options[actions.options.length] = new Option('{{t escape='javascript'}}Delete{{/t}}');
      actions.onchange = function() {
        if (this.selectedIndex == 1) {
          var deletes = [];
          for (var idx in  _selects) {
            var obj = _selects[idx];
            if (obj.checked) {
              deletes[deletes.length] = obj._obj;
            }
          }
          new RequestUtils()._custom('delete_attributes', JSON.stringify(deletes), function(result, params) {
            for (var idx in  deletes) {
              var obj = deletes[idx];
              MiscUtils.remove(_attributes, obj, null);
            }
            update_attributes_table();
            actions.selectedIndex = 0;
          }, {
            php: 'ecommerce/custom.php',
            pos : DOMUtils.findPos(this)
          });
        }
      };
    }

    function setTinyMCE() {
      // Display
      tinyMCE.init( {
      // General options
      mode : "exact",
      elements : "product_content",
      theme : "advanced",

      plugins : "pdw,filebrowser,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
      // Theme options
      theme_advanced_buttons1 : "pdw_toggle,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,image,media",
      theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,cleanup,help,code,|,insertdate,inserttime,preview",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true,
      file_browser_callback : 'filebrowser',
      pdw_toggle_on : "1",
      pdw_toggle_toolbars : "2,3,4",

      // Example content CSS (should be your site CSS)
      content_css : "css/content.css",
      theme_advanced_font_sizes : "10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px",
      font_size_style_values : "10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px",
      width : '500px',
      height : '300px',

      // Drop lists for link/image/media/template dialogs
      template_external_list_url : "js/lists/template_list.js",
      external_link_list_url : "js/lists/link_list.js",
      external_image_list_url : "js/lists/image_list.js",
      media_external_list_url : "js/lists/media_list.js",
      // Style formats
      style_formats : [ {
        title : 'Bold text',
        inline : 'b'
      }, {
        title : 'Red text',
        inline : 'span',
        styles : {
          color : '#ff0000'
        }
      }, {
        title : 'Red header',
        block : 'h1',
        styles : {
          color : '#ff0000'
        }
      }, {
        title : 'Example 1',
        inline : 'span',
        classes : 'example1'
      }, {
        title : 'Example 2',
        inline : 'span',
        classes : 'example2'
      }, {
        title : 'Table styles'
      }, {
        title : 'Table row 1',
        selector : 'tr',
        classes : 'tablerow1'
      } ],

      // Replace values for the template 
      template_replace_values : {
        username : "Some User",
        staffid : "991234"
      }
    });
    }
    
    function setCategories(select, node, level) {
      var op;
      if (level == 0) {
        op = new Option('{{t escape='javascript'}}Select...{{/t}}');
        op._obj = {
          id: 0
        };
      } else {
        op = new Option(node.name);
      }
      op._obj = node;
      op.style.paddingLeft = level * 5 + 'px';
      select.options[select.options.length] = op;
      {{if isset($product)}}
      if (node.id == '{{$product->category_id|escape:'javascript'}}') {
        select.selectedIndex = select.options.length - 1;
      }
      {{/if}}
      for (var i = 0, il = node.c.length; i < il; i++) {
        setCategories(select, node.c[i], level+1);
      }
    }
    
    function setup_gallery() {
      var table, tr, td, elm, gallery;
      
      gallery = document.getElementById('{{$t|escape:'javascript'}}_gallery');
      DOMUtils.removeChildElements(gallery);
      if (_images.length == 0) {
        elm = document.createElement('div');
        elm.appendChild(document.createTextNode('{{t escape='javascript'}}No Photos Found{{/t}}'));
        gallery.appendChild(elm);
      } else {
        table = document.createElement('table');
        table.style.borderTop = '1px solid #dddddd';
        table.style.borderLeft = '1px solid #dddddd';
        
        gallery.appendChild(table);
        for(var i = 0, il = _images.length; i < il; i++) {
          if (i % 4 == 0) {
            tr = table.insertRow(-1);
          }
          td = tr.insertCell(-1);
          td.style.width = '150px';
          td.style.borderRight = '1px solid #dddddd';
          td.style.borderBottom = '1px solid #dddddd';
          td.style.textAlign = 'center';
          td.style.verticalAlign = 'middle';
          
          var file_obj = {
            id: _images[i].id,
            product_track_id: _images[i].product_track_id,
            large: _images[i].path,
            small: _images[i].path_tn,
            _large: 'ecommerce/' + _images[i].path,
            _small: 'ecommerce/' + _images[i].path_tn
          };
          var del_file_func = function(file_obj) {
            new RequestUtils()._custom('delete_product_image', JSON.stringify(file_obj), function(result, params) {
              MiscUtils.remove(_images, file_obj, null);
              setup_gallery();
            }, {
              php: 'ecommerce/custom.php',
              pos : DOMUtils.findPos(this)
            });
          };
          Utils.imgDisp(file_obj, del_file_func, 80, 80, td);
        }
      }
    }
    
    function setStock(){
      var stock_status = document.getElementById('{{$t|escape:'javascript'}}_stock_box');
      var stock = document.getElementById('{{$t|escape:'javascript'}}_stock_text');
      
      if(stock_status.checked) {
        stock.disabled = '';
        stock.value = '{{if isset($product)}}{{$product->stock|escape:'javascript'}}{{/if}}';
      } else {
        stock.disabled = 'disabled';
        stock.value = 0;
      }
    }
    function save_product() {
      tinyMCE.get('{{$t|escape:'html'}}_content').setProgressState(1);
      var category = document.getElementById('{{$t|escape:'javascript'}}_category');
      var price = document.getElementById('{{$t|escape:'javascript'}}_price');
      var level1_price = document.getElementById('{{$t|escape:'javascript'}}_level1_price');
      var level2_price = document.getElementById('{{$t|escape:'javascript'}}_level2_price');
      var vip_price = document.getElementById('{{$t|escape:'javascript'}}_vip_price');
      var is_credit = document.getElementById('{{$t|escape:'javascript'}}_credit_checkbox');
      var stock_status = document.getElementById('{{$t|escape:'javascript'}}_stock_box');
      var stock = document.getElementById('{{$t|escape:'javascript'}}_stock_text');
      var stock_notice = document.getElementById('{{$t|escape:'javascript'}}_stock_notice');
      var product = {
        track_id: '{{$track_id|escape:'javascript'}}',
        category_id: category.options[category.selectedIndex]._obj.id,
        model_id: 0,
        name: document.getElementById('{{$t|escape:'javascript'}}_name').value,
        price: (isNaN(price.value) || price.value == '') ? 0.00 : price.value,
        level1_price: (isNaN(level1_price.value) || level1_price.value == '') ? 0.00 : level1_price.value,
        level2_price: (isNaN(level2_price.value) || level2_price.value == '') ? 0.00 : level2_price.value,
        vip_price: (isNaN(vip_price.value) || vip_price.value == '') ? 0.00 : vip_price.value,
        is_credit: is_credit.checked ? 1 : 0,
        stock: (stock.value == '') ? 0 : stock.value,
        stock_notice: (stock_notice.value == '') ? 0 : stock_notice.value,
        stock_status: stock_status.checked ? 1 : 0,
        status: document.getElementById('{{$t|escape:'javascript'}}_available').checked ? 1 : 0,
        ship_req: document.getElementById('{{$t|escape:'javascript'}}_ship').checked ? 1 : 0,
        intro_brief: document.getElementById('{{$t|escape:'javascript'}}_short').value,
        intro_detail: tinyMCE.get('{{$t|escape:'html'}}_content').getContent(),
        order: Math.random()
      };
      
      if (_id != 0) {
        product.id = _id;
        product.order = '{{if isset($product)}}{{$product->order|escape:'javascript'}}{{/if}}';
        var array = [];
        for (var idx in _options) {
          var obj = _options[idx];
          if (obj._c == 1) {
            delete obj._c;
            array[array.length] = obj;
          }
        }
        new RequestUtils()._custom('update_product', JSON.stringify({ p: product, a: _edit, opts: array }), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=products';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      } else {
        product.order = '{{if isset($min_order)}}{{$min_order - 1|escape:'javascript'}}{{/if}}';
        new RequestUtils()._custom('product', JSON.stringify(product), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=products';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      }
      
    }
    
    function add_attribute() {
      var min = 0;
      for (var idx in _attributes) {
        var obj = _attributes[idx];
        if (obj.order < min) {
          min = obj.order;
        }
      }
      var attribute = {
        track_id: MiscUtils.unique(),
        product_track_id: '{{$track_id|escape:'javascript'}}',
        name: '{{t escape='javascript'}}New Attribute{{/t}}',
        type: Utils.ATTRIBUTE_TYPE_SINGLE_OPTION,
        is_mandatory: 1,
        intro_brief: '',
        image_path: '',
        image_path_tn: '',
        order: --min
      };
      new RequestUtils()._custom('attribute', JSON.stringify(attribute), function(result, params) {
        _attributes[_attributes.length] = result;
        update_attributes_table();
      }, {
        php: 'ecommerce/custom.php',
      });
    }
    
    function update_attributes_table() {
      var table, tr, td, elm, div;
      //Product Attributes
      table = document.getElementById('{{$t|escape:'javascript'}}_attributes');
      DOMUtils.removeTableRows(table, 2);
      if (_attributes.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'nohover';
        td = tr.insertCell(-1);
        td.colSpan = 6;
        td.style.padding = '5px 0 5px 10px';
        td.style.height = '35px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Attributes Found{{/t}}'));
        
      } else {
        _attributes = MiscUtils.sortByOrder(_attributes);

        for (var idx in _attributes) {
          var obj = _attributes[idx];
          
          tr = table.insertRow(-1);
          if (!_edit || _edit.id != obj.id) {
            document.body.onmouseup = function(ev) {
              ev = (ev) ? ev : window.event;
              if (!_move) {
                return;
              }
              new RequestUtils()._custom('attribute', JSON.stringify(_move), function(result, params) {
                _move = null;
                update_attributes_table();
              }, {
                php: 'ecommerce/custom.php',
                pos : [ev.clientX, ev.clientY]
              });
            };
            
            if (_move) {
              tr.style.cursor = 'move';
            }
            
            if (_move && obj.track_id == _move.track_id) {
              tr.className = 'hi';
            } else {
              tr.className = (idx % 2 == 1) ? tr.className = 'rowodd' : 'roweven';
            }
            
            td = tr.insertCell(-1);
            elm = document.createElement('input');
            elm.type = 'checkbox';
            elm._obj = obj;
            _selects.push(elm);
            td.appendChild(elm);
            
            td = tr.insertCell(-1);
            update_attributes_cell(obj, td);
            td.appendChild(document.createTextNode(obj.name));
            
            td = tr.insertCell(-1);
            update_attributes_cell(obj, td);
            td.appendChild(document.createTextNode(Utils.getAttributeType(obj.type)));
            
            td = tr.insertCell(-1);
            update_attributes_cell(obj, td);
            td.appendChild(document.createTextNode(obj.is_mandatory ? 'Yes' : 'No'));
            
            td = tr.insertCell(-1);
            update_attributes_cell(obj, td);
            td.appendChild(document.createTextNode(obj.intro_brief));
            
            td = tr.insertCell(-1);
            elm = document.createElement('img');
            elm.className = '{{$t|escape:'javascript'}}_image_button';
            elm.src = 'image/edit.png';
            elm._obj = obj;
            elm.onclick = function() {
              _edit = this._obj;
              update_attributes_table();
            }
            td.appendChild(elm);
          } else {
            tr.className = 'drop';
            td = tr.insertCell(-1);
            td.colSpan = 6;
            td.style.padding = 0;
            td.style.border = 0;
            setup_attribute_dialog(td);
          }
        }
      }
    }
    
    function update_attributes_cell(attribute, td) {
      if (_edit) {
        return;
      }
      if (!_move || attribute.track_id != _move.track_id) {
        td.style.cursor = 'move';
        td._obj = attribute;
        td.onmousedown = function(ev) {
          ev = (ev) ? ev : window.event;
          _move = this._obj;
          update_attributes_table();
          _y = ev.clientY;
        };
        td.onmouseover = function(ev) {
          ev = (ev) ? ev : window.event;
          if (OOBTUtils.move(_move, this._obj, _attributes, (ev.clientY - _y < 0))) {
            _y = ev.clientY;
            update_attributes_table();
          }
        };
      }
    }
    
    function setup_attribute_dialog(container) {
      var div, table, tr, td, itable, itr, itd, elm;
      
      var clone = MiscUtils.clone(_edit);
      
      DOMUtils.removeChildElements(container);
      
      table = document.createElement('table');
      container.appendChild(table);
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.textAlign = 'center';
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
      elm = Utils.imgBtn('{{t escape='javascript'}}Update{{/t}}', 'image/btn/update.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      elm.onclick = function () {
        var array = [];
        for (var idx in _options) {
          var obj = _options[idx];
          if (obj._c == 1) {
            delete obj._c;
            array[array.length] = obj;
          }
        }
        new RequestUtils()._custom('update_attribute', JSON.stringify({ a: _edit, opts: array }), function(result, params) {
          _edit = null;
          update_attributes_table();
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      };
      div.appendChild(elm);
      elm = Utils.imgBtn('{{t escape='javascript'}}Cancel{{/t}}', 'image/btn/close.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      div.appendChild(elm);
      elm.onclick = function() {
        for (var idx in _attributes) {
          if (_attributes[idx].id == _edit.id) {
            _attributes[idx] = clone;
          }
        }
        _edit = null;
        update_attributes_table();
      }
      div.appendChild(elm);
      
      div = document.createElement('div');
      div.style.backgroundColor = '#ffffff';
      div.style.borderLeft = '15px solid #b4c8fa';
      div.style.borderRight = '15px solid #b4c8fa';
      container.appendChild(div);
      
      table = document.createElement('table');
      table.style.width = '100%';
      div.appendChild(table);
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.width = '50%';
      
      itable = document.createElement('table');
      itable.className = '{{$t|escape:'html'}}_listdrop';
      td.appendChild(itable);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Name{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.name;
      elm.onchange = function() {
        _edit.name = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itr.style.display = 'none';
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Type{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('select');
      elm.className = '{{$t|escape:'html'}}_select';
      elm.style.height = '24px';
      elm.onchange = function() {
        var old = _edit.type;
        _edit.type = this.options[this.selectedIndex]._obj.id;
        if (old == Utils.ATTRIBUTE_TYPE_CUSTOMER_INPUT || _edit.type == Utils.ATTRIBUTE_TYPE_CUSTOMER_INPUT) {
          setup_attribute_dialog(container);
        }
      };
      itd.appendChild(elm);
      
      var types = Utils.getAttributeTypes();
      for (var idx in types) {
        var obj = types[idx];
        var op = new Option(obj.name);
        op._obj = obj;
        elm.options[elm.options.length] = op;
        if (idx == _edit.type) {
          elm.selectedIndex = elm.options.length - 1;
        }
      }
      
      itr = itable.insertRow(-1);
      itr.style.display = 'none';
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Mandatory{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'checkbox';
      elm.checked = _edit.is_mandatory;
      elm.onchange = function() {
        _edit.is_mandatory = this.checked ? 1 : 0;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itr.style.display = 'none';
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Description{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('textarea');
      elm.className = '{{$t|escape:'html'}}_textarea';
      elm.style.height = '80px';
      elm.value = _edit.intro_brief;
      elm.onchange = function() {
        _edit.intro_brief = this.value;
      };
      itd.appendChild(elm);
      td = tr.insertCell(-1);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.verticalAlign = 'top';
      td.colSpan = 2;
      
      itable = document.createElement('table');
      itable.className = '{{$t|escape:'html'}}_listdrop';
      itable.cellPadding = 0;
      itable.cellSpacing = 0;
      td.appendChild(itable);
      
      if (_edit.type != Utils.ATTRIBUTE_TYPE_CUSTOMER_INPUT) {
        itr = itable.insertRow(-1);
        itd = itr.insertCell(-1);
        itd.className = 'title';
        itd.appendChild(document.createTextNode('{{t escape='javascript'}}Options{{/t}}'));
        itd = itr.insertCell(-1);
        itd.style.padding = '5px 0';
        itd.style.backgroundColor = '#dde1eb';
        elm = Utils.imgBtn('{{t escape='javascript'}}Add{{/t}}', 'image/btn/add_blue.png');
        elm.style.fontSize = '11px';
        elm.onclick = function() {
          add_attribute_option();
        };
        itd.appendChild(elm);
      
        itr = itable.insertRow(-1);
        _opane = itr.insertCell(-1);
        _opane.colSpan = 2;
        _opane.style.padding = '5px 0 0 5px';
        elm = document.createElement('img');
        elm.src = 'image/loading.gif';
        _opane.appendChild(elm);
        
        read_attribute_options();
      }
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
    }
    
    function add_attribute_option() {
      var option = {
        track_id: MiscUtils.unique(),
        attribute_id: _edit.id,
        name: '{{t escape='javascript'}}New Option{{/t}}',
        is_default: 0,
        price: 0,
        intro_brief: '',
        image_path: '',
        image_path_tn: '',
        order: Math.random()
      };
      new RequestUtils()._custom('option', JSON.stringify(option), function(result, params) {
        read_attribute_options();
      }, {
        php: 'ecommerce/custom.php',
        pos : DOMUtils.findPos(this)
      });
    }
    
    function read_attribute_options() {
      var cond_vals = {
        c: 't.attribute_id = :v1',
        v: { v1: _edit.id }
      };
//      new RequestUtils()._read('pz_ecom_product_option', cond_vals, null, null, 't.id', 'ASC', function(result, params) {
//        _options = result.d;
//        update_attribute_options();
//      }, {
//        pos : DOMUtils.findPos(this)
//      });
      new RequestUtils()._custom('ezreadobj', JSON.stringify({tbl: 'pz_ecom_product_option', c: (JSON.stringify(cond_vals)), o: 't.id', q: 'ASC'}), function(result, params) {
        _options = result.d;
        update_attribute_options();
      }, {
        php: 'custom.php',
        pos : DOMUtils.findPos(this)
      });
    }
    
    function update_attribute_options() {
      var table, tr, td, elm;
      
      DOMUtils.removeChildElements(_opane);
      if (_options.length == 0) {
        elm = document.createElement('div');
        elm.style.padding = '5px 10px';
        elm.appendChild(document.createTextNode('{{t escape='javascript'}}No Options Found{{/t}}'));
        _opane.appendChild(elm);
        return;
      }
      
      table = document.createElement('table');
      table.className = '{{$t|escape:'html'}}_option';
      _opane.appendChild(table);
      
      for (var idx in _options) {
        var obj = _options[idx];
        if (idx % 5 == 0) {
          tr = table.insertRow(-1);
        }
        td = tr.insertCell(-1);
        td.style.verticalAlign = 'top';
        setup_attribute_option(obj, td);
      }
    }
    
    function setup_attribute_option(option, container) {
      var table, tr, td, elm;
      
      DOMUtils.removeChildElements(container);
      
      if (option.is_default == 1) {
        container.style.border = '2px solid #ff8000';
      }
      
      table = document.createElement('table');
      table.className = '{{$t|escape:'html'}}_optionde';
      table.cellPadding = 0;
      table.cellSpacing = 0;
      container.appendChild(table);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      if (option.is_default == 0) {
        elm = document.createElement('input');
        elm.type = 'button';
        elm.value = '{{t escape='javascript'}}Set Default{{/t}}';
        elm.onclick = function() {
          new RequestUtils()._custom('set_default_option', JSON.stringify(option), function(result, params) {
            read_attribute_options();
          }, {
            php: 'ecommerce/custom.php',
            pos : DOMUtils.findPos(this)
          });
        };
        td.appendChild(elm);
      } else {
        elm = document.createElement('input');
        elm.type = 'button';
        elm.value = '{{t escape='javascript'}}Default{{/t}}';
        elm.disabled = true;
        td.appendChild(elm);
      }
      td = tr.insertCell(-1);
      td.style.textAlign = 'right';
      elm = document.createElement('img');
      elm.src = 'image/btn/delete.png';
      elm.className = '{{$t|escape:'html'}}_image_button';
      elm.onclick = function() {
        new RequestUtils()._custom('delete_option', JSON.stringify(option), function(result, params) {
          read_attribute_options();
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      };
      td.appendChild(elm);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.className = 'title';
      td.appendChild(document.createTextNode('{{t escape='javascript'}}Name{{/t}}'));
      td = tr.insertCell(-1);
      elm = document.createElement('input');
      elm.style.width = '120px';
      elm.type = 'text';
      elm.value = option.name;
      elm.onchange = function() {
        option.name = this.value;
        option._c = 1;
      };
      td.appendChild(elm);
      {{*/*
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.className = 'title';
      td.appendChild(document.createTextNode('{{t escape='javascript'}}Price{{/t}}'));
      td = tr.insertCell(-1);
      elm = document.createElement('input');
      elm.style.width = '120px';
      elm.type = 'text';
      elm.value = option.price;
      elm.onchange = function() {
        option.price = this.value;
        option._c = 1;
      };
      td.appendChild(elm);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.className = 'title';
      td.appendChild(document.createTextNode('{{t escape='javascript'}}Description{{/t}}'));
      td = tr.insertCell(-1);
      elm = document.createElement('textarea');
      elm.style.height = '36px';
      elm.style.width = '120px';
      elm.value = option.intro_brief;
      elm.onchange = function() {
        option.intro_brief = this.value;
        option._c = 1;
      };
      td.appendChild(elm);
      
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.verticalAlign = 'top';
      elm = document.createElement('span');
      elm.id = option.track_id + UploadUtils._defaultButtonPlaceholderId;
      td.appendChild(elm);
      elm = document.createElement('span');
      elm.id = option.track_id + UploadUtils._defaultCancelButtonId;
      td.appendChild(elm);
      
      //Upload Attribute Picture
      var pos = DOMUtils.findPos(document.getElementById(option.track_id + UploadUtils._defaultButtonPlaceholderId));
      var up = null;
      var initFunc = function() {
        div = document.createElement('div');
        p = new ModulePopupBox();
        p._open(div, {
          pos : [ pos[0], pos[1] ],
          width : 468,
          t : '',
          doc : document
        });
        up = new ModuleUpload(document, div, 468, 260, null, null, {
          callbackFunc : function() {
            if (up._files.length == 1) {
              option.image_path = up._files[0].image_path;
              option.image_path_tn = up._files[0].image_path_tn;
              setup_attribute_option(option, container);
            }
          },
          u: option.track_id,
          popupBox : p
        });
      };
      var uu = new UploadUtils(option.track_id);
      uu._uploadUrl = 'ecommerce/upload_option_image.php';
      uu._buttonImageUrl = 'image/upload/browse.png';
      uu._buttonWidth = 94;
      uu._buttonHeight = 29;
      uu._fileUploadLimit = 1;
      uu._createInstance('', {
        id : option.id,
        attribute_id: option.attribute_id,
        t : true,
        tw: 100,
        th: 100
      }, initFunc, function(file, result) {
        up._callbackFunc(file, result);
      });
      
      td = tr.insertCell(-1);
      var file_obj = {
        id: option.id,
        attribute_id: option.attribute_id,
        large: option.image_path,
        small: option.image_path_tn,
        _large: 'ecommerce/' + option.image_path,
        _small: 'ecommerce/' + option.image_path_tn
      };
      var del_file_func = function(file_obj) {
        new RequestUtils()._custom('delete_option_image', JSON.stringify(file_obj), function(result, params) {
          option.image_path = '';
          option.image_path_tn = '';
          setup_attribute_option(option, container);
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      };
      Utils.imgDisp(file_obj, del_file_func, 100, 100, td);
      */*}}
    }
  // -->
</script>